@import '~/common/style/index.scss';
@import '../../button/style/style.scss';
@import './mixin.scss';

$dialog-prefix-cls: #{$cui-prefix}-modal;

.#{$dialog-prefix-cls} {
    @include modal-mask();
    position: relative;
    // top: 100px;
    width: auto;
    max-width: calc(100vw - 32px);
    margin: 0 auto;
    // padding-bottom: 24px;

    &-wrap {
        z-index: $zindex-modal;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: left;
    }
    
    &-title {
        margin: 0;
        @include Title(large, inherit);
        word-wrap: break-word;
    }

    &-content {
        // position: relative;
        background-color: $modal-content-bg;
        background-clip: padding-box;
        border: 0;
        border-radius: $modal-border-radius;
        box-shadow: $shadow-2;
        pointer-events: auto;
        height: 100%;
        overflow: auto;
    }
    &-content-round{
      border-radius: 16px;
    }

    &-close {
        position: absolute;
        top: 0;
        right: 0;
        z-index: $zindex-popup-close;
        padding: 0;
        color: $modal-close-color;
        font-weight: 700;
        line-height: 1;
        text-decoration: none;
        background: transparent;
        border: 0;
        outline: 0;
        cursor: pointer;
        transition: color 0.3s;
    
        &-x {
          display: flex;
          width: $modal-header-close-size;
          height: $modal-header-close-size;
          font-size: $font-size-lg;
          font-style: normal;
          line-height: $modal-header-close-size;
          text-align: center;
          text-transform: none;
          text-rendering: auto;
          justify-content: center;
          align-items: center;
        }
    
        &:focus,
        &:hover {
          color: $icon-color-hover;
          text-decoration: none;
        }
    }

    &-header {
        padding: $modal-header-padding;
        color: $gray-2;
        background: $modal-header-bg;
        border-bottom: $modal-header-border-width $modal-header-border-style
          $modal-header-border-color-split;
        border-radius: $modal-border-radius $modal-border-radius 0 0;
    }

    &-body {
        padding: $modal-body-padding;
        font-size: $font-size-base;
        line-height: $line-height-base;
        word-wrap: break-word;
        color: $gray-2;
    }

    &-footer {
        padding: $modal-footer-padding-vertical $modal-footer-padding-horizontal;
        text-align: right;
        background: $modal-footer-bg;
        border-top: $modal-footer-border-width $modal-footer-border-style
          $modal-footer-border-color-split;
        border-radius: 0 0 $modal-border-radius $modal-border-radius;
        
        button:nth-child(2){
            margin-bottom: 0;
            margin-left: 8px;
        }
        .#{$cui-prefix}-btn+.#{$cui-prefix}-btn:not(.#{$cui-prefix}-dropdown-trigger) {
          margin-bottom: 0;
          margin-left: 8px;
        }
        .#{$cui-prefix}-button{
          padding: 8px 20px;
        }
    }
    &-open {
        overflow: hidden;
    }
}

.#{$dialog-prefix-cls}-centered {
    text-align: center;
  
    &::before {
      display: inline-block;
      width: 0;
      height: 100%;
      vertical-align: middle;
      content: '';
    }
    .#{$dialog-prefix-cls} {
      top: 0;
      display: inline-block;
      padding-bottom: 0;
      text-align: left;
      vertical-align: middle;
    }
}

@media (max-width: $screen-sm-max) {
    .#{$dialog-prefix-cls} {
      max-width: calc(100vw - 16px);
      margin: 8px auto;
    }
    .#{$dialog-prefix-cls}-centered {
      .#{$dialog-prefix-cls} {
        flex: 1;
      }
    }
}

.#{$dialog-prefix-cls}-content-dark{
  background-color: $gray-1;
  color: $gray-98;

  .#{$dialog-prefix-cls}-header{
    background-color: $gray-1;
    color: $gray-98;
    border-bottom: 1px solid $gray-2;
  }
  .#{$dialog-prefix-cls}-body{
    color: $gray-98;
  }
  .#{$dialog-prefix-cls}-footer{
    border-top: 1px solid $gray-2;
  }
}